<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>1.基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        Vue中使用组件的三大步骤:
        1. 定义组件(创建组件)
        2. 注册组件
        3. 使用组件(薛祖健标签)
        ---
        1. 如何定义一个组件?
            使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别:
            区别如下:
            1. el不要写,为什么? 最终所有的组件都要进过一个vm的管理,由vm中的el决定服务哪个容器.
            2. data必须写成函数,为什么? 避免组件被服用时,数据存在引用关系.
            备注: 使用template可以配置组件结构
        2. 如何祖册组件?
            1. 局部注册: 靠new Vue的时候传入components选项
            2. 全局注册: 靠Vue.component('组件名',组件)
        3. 编写组件标签:
            <school></school>
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <hello></hello>
        <hr />
        <h1>{{msg}}</h1>
        <hr />
        <!-- 第三步:编写组件标签 -->
        <school></school>
        <hr />
        <!-- 第三步:编写组件标签 -->
        <student></student>
        <!-- 组件的复用,互不影响 -->
        <student></student>
    </div>

    <div id="root2">
        <hello></hello>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示

        //第一步:创建school组件
        const school = Vue.extend({
            template: `
                <div>
                    <h2>学校名称:{{schoolName}}</h2>
                    <h2>学校地址:{{address}}</h2>
                    <button @click="showName">点我提示学校名</button>
                </div>
            `,
            // el: '#root',  //组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于那个容器.
            data() {
                return {
                    schoolName: '尚硅谷',
                    address: '北京昌平'
                }
            },
            methods: {
                showName() {
                    alert(this.schoolName);
                },
            },
        });
        //第一步:创建student组件
        const student = Vue.extend({
            template: `
                <div>
                    <h2>学生姓名:{{studentName}}</h2>
                    <h2>学生年龄:{{age}}</h2>
                </div>
            `,
            data() {
                return {
                    studentName: '张三',
                    age: 18
                }
            }
        });

        //第一步:创建hello组件
        const hello = Vue.extend({
            template: `
                <div>
                    <h2>你好啊!{{name}}</h2>
                </div>
            `,
            data() {
                return {
                    name: 'Tom'
                }
            }
        });

        //第二步:全局注册组件
        Vue.component('hello', hello);


        const vm = new Vue({
            el: '#root',
            data: {
                msg: '你好啊!'
            },
            //第二步:注册组件(局部注册)
            components: {
                school,
                student
                //属性名和属性值同名时可以简写为以上形式
                // school: school,
                // student: student
            }
        });

        const vm2 = new Vue({
            el: '#root2',

        });


        //为什么data不用对象式而用函数式.下面这个是解释
        let data1 = {
            a: 1,
            b: 2
        }
        const x1 = data1;
        const x2 = data1;
        console.log(x1);
        console.log(x2);
        x2.a = 99;
        console.log(x1);
        console.log(x2);

        function data2() {
            return {
                a: 1,
                b: 2
            }
        }
        const x3 = data2();
        const x4 = data2();
        console.log(x3);
        console.log(x4);
        x3.a = 99;
        console.log(x3);
        console.log(x4);


    </script>
</body>

</html>